<template>
  <div class="add">
    <BaseDialog
      :title="$t('新增')"
      width="auto"
      v-model:visible="innerVisible"
      :okButtonProps="{
        disabled: !isTypeRadio
          ? multipleSelection.length === 0
          : multipleSelection.length != 1,
      }"
      :loading="saveBtnLoading"
      @on-close="innerVisible = false"
      :onOk="onSubmit"
    >
     <div style="padding: 0 5px;">
       <MyTable
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        :pageVo="pageVo"
        :columnMinWidth="100"
        @handleSelectionChange="handleSelectionChange"
        @handle-page-change="handlePageChange"
      ></MyTable>
     </div>
    </BaseDialog>
  </div>
</template>
<script setup>
import { ref, computed, onMounted, watch } from "vue";
import * as api from "@/api/index.js";
import i18n from "@/lang/index.js";
import { ElMessage } from "element-plus";
import { characterSegmentation } from "@/utils/mUtils.js";
const props = defineProps({
  visible: {
    type: Boolean,
  },
  isTypeRadio: {
    type: Number,
    default: 0,
  },
});
const emits = defineEmits(["update:visible", "onSubmit"]);
const innerVisible = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emits("update:visible", val);
  },
});
const columns = ref([
  {
    type: "checkbox",
    width: 50,
    align: "center",
    fixed: "left",
  },
  {
    title: "序号",
    type: "seq",
    width: 50,
    fixed: "left",
  },
  {
    field: "soNo",
    title: "SO号",
  },
  {
    field: "bookingNo",
    title: "舱位编号",
  },
  {
    field: "lineName",
    title: "干线名称",
  },
  {
    field: "loadingPortName",
    title: "起运港",
    width: "auto",
  },
  {
    field: "dischargePortName",
    title: "卸货港",
    width: "auto",
  },
  {
    field: "deliveryPortName",
    title: "目的港",
    width: "auto",
  },
  {
    field: "containerCode",
    title: "柜型",
    width: "auto",
  },
  {
    field: "typeName",
    title: "L/F",
    width: "auto",
  },
  {
    field: "providerName",
    title: "船公司",
    formatter: ({ row }) => {
      return characterSegmentation(row, ["providerName", "providerCode"], "-");
    },
  },
  {
    field: "lineDetailCode",
    title: "航线代码",
  },
  {
    field: "shippingInstructionCutoffTime",
    title: "截单时间",
    width: 130,
  },
  {
    field: "cargoReceivingCutoffTime",
    title: "截货时间",
    width: 130,
  },
]);
const dataSource = ref([]);
const pageVo = ref({
  pageSize: 50,
  total: 10,
  currentPage: 1,
  status: true,
});
const loading = ref(false);
const saveBtnLoading = ref(false);
const multipleSelection = ref([]);
onMounted(() => {
  list();
});
const list = () => {
  loading.value = true;
  api.default.oceanFreight.bookingManagement
    .pendingList({
      pageNum: pageVo.currentPage,
      pageSize: pageVo.pageSize,
    })
    .then((res) => {
      dataSource.value = res.rows;
      loading.value = false;
      pageVo.total = res.total;
    })
    .catch(() => {
      loading.value = false;
    });
};
const handlePageChange = (val) => {
  const { currentPage, pageSize } = val;
  pageVo.currentPage = currentPage;
  pageVo.pageSize = pageSize;
  list();
};
const handleSelectionChange = (list) => {
  multipleSelection.value = list;
};
const onSubmit = () => {
  if (props.isTypeRadio) {
    innerVisible.value = false;
    emits("onSubmit", multipleSelection.value[0]);
    
    return;
  }
  const bookingSpaceIds = multipleSelection.value.map((item) => item.id);
  // 新增
  saveBtnLoading.value = true;
  api.default.oceanFreight.cabinetArrangement
    .batchAdd(bookingSpaceIds)
    .then(() => {
      ElMessage.success("新增成功");
      innerVisible.value = false;
      saveBtnLoading.value = false;
      emits("onSubmit");
    })
    .catch(() => {
      saveBtnLoading.value = false;
    });
};
</script>
<style lang="scss" scoped>
</style>
